<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange"
                        border>
                        查看已删门店
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd"
                        type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
                <el-form-item>
                    <el-tooltip class="item" effect="dark" placement="bottom-end">
                        <div slot="content" style="line-height:20px">
                            <br>时间:查询的日期，日周期为今日6点至次日6点
                            <br> 本期总入库金额（元）:公式=采购入库（已入库）+杂项入库（已入库）+店外调入（已入库）的总金额
                            <br> 己方未收货金额（元）:公式=采购与其他店调入的在途（未入库）的订单金额
                            <br> 本期总出库金额（元）:公式=礼品机出货金额+店外调出单（对方已入库）金额+店内其他渠道出货金额
                            <br> 对方未收货金额（元）:公式=本店调出在途的订单（对方未入库）金额
                            <br> 采购单入库金额（元）:公式=∑（礼品采购价*礼品入库数）
                            <br> 店外调入单金额（元）:公式=∑（礼品成本价*礼品入库数）
                            <br> 杂项入库单金额（元）:公式=总部配送（礼品成本价*礼品入库数）+其他渠道礼品数*0
                            <br> 采购单在途金额（元）:公式=∑（礼品采购价*礼品订单数）
                            <br> 店外调入在途单金额（元）:公式=∑（礼品成本价*礼品订单数）
                            <br> 店外调出单金额（元）:公式=∑（礼品成本价*礼品入库数）
                            <br> 礼品机出货金额（元）:公式=∑（礼品成本价*机台礼品出货数）
                            <br> 收银台赠送（其他）元:公式=∑（礼品成本价*其他方式礼品出货数）
                            <br> 店外调出单金额（元）:公式=∑（礼品成本价*礼品订单数）
                        </div>
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table highlight-current-row sum-text="合计" :data="list" v-loading.body="listLoading" border size="mini">
                <el-table-column align="center" prop="date" label="时间">
                    <template slot-scope="scope"> {{scope.row.datebegin}} ~ {{scope.row.dateend}}</template>
                </el-table-column>
                <el-table-column align="center" label="门店名称">
                    <template slot-scope="scope">
                        {{scope.row.store_name}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="本期总入库金额（元）">
                    <template slot-scope="scope">
                        <el-button :disabled="scope.row.thisIn*1==0" type="text" @click="ditailClick('thisIn')">
                            {{scope.row.thisIn|keepTwoNum}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="己方未收货总金额（元）">
                    <template slot-scope="scope">
                        <el-button :disabled="scope.row.thisweiIn*1==0" type="text" @click="ditailClick('thisweiIn')">
                            {{scope.row.thisweiIn|keepTwoNum}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="本期总出库金额（元）">
                    <template slot-scope="scope">
                        <el-button :disabled="scope.row.thisOut*1==0" type="text" @click="ditailClick('thisOut')">
                            {{scope.row.thisOut|keepTwoNum}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="对方未到货金额（元）">
                    <template slot-scope="scope">
                        <el-button :disabled="scope.row.thisweiOut*1===0" type="text"
                            @click="ditailClick('thisweiOut')">
                            {{scope.row.thisweiOut|keepTwoNum}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="本期退货总金额（元）">
                    <template slot-scope="scope">
                        <el-button :disabled="scope.row.return_money*1==0" type="text"
                            @click="ditailClick('return_money')">
                            {{scope.row.return_money|keepTwoNum}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 供货商弹框 -->
        <el-dialog :close-on-click-modal="false" width="400px" :title="dialogTitle" :visible.sync="detailDialog">
            <div style="text-align:center;">
                <p v-if="val1">{{val1}}</p>
                <p v-if="val2">{{val2}}</p>
                <p v-if="val3">{{val3}}</p>
                <p v-if="val4">{{val4}}</p>
                <p v-if="val5">{{val5}}</p>
                <p v-if="val6">{{val6}}</p>
            </div>
        </el-dialog>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-button class="pull-right" type="primary" size="small" @click="exportClick()" :loading="exportLoading">报表导出<count-down ref="cd"/></el-button>
        </div>
    </div>
</template>
<script>
    import {
        getList,
        getExport,
        getStoreList,
    } from "@/api/storage_control/IO_form";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    export default {
        data() {
            return {
                exportLoading: false,
                typeList: [{ id: 1, name: '门店仓' }, { id: '2', name: '公司仓' }],
                list: null,
                total: null,
                listLoading: false,
                detailDialog: false,
                dialogTitle: '',
                val1: '',
                val2: '',
                val3: '',
                val4: '',
                val5: '',
                val6: '',
                storeList: null,
                brandList: [],
                detailList: [],
                formInline: {
                    category_id: 103,
                    store_id: '',
                    begin_time: '',
                    brand_id: '',
                    end_time: '',
                    look_del:'0'
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                if (!vm.storeList) {
                    vm.getStore();
                }
            })
        },
        methods: {
            lookDelChange() {
                this.getStore();
            },
            // 详情弹框
            ditailClick(type) {
                switch (type) {
                    case "thisIn":
                        this.dialogTitle = "本期总入库金额（元）"
                        this.val1 = '采购入库总金额（元) ' + (this.list[0].cai_ru_money * 1).toFixed(2)
                        this.val2 = '店外调入总金额（元） ' + (this.list[0].diao_ru_money * 1).toFixed(2)
                        this.val3 = '杂项入库总金额（元) ' + (this.list[0].za_ru_money * 1).toFixed(2)
                        this.val4 = "跨平台调拨金额（元）" + (this.list[0].platform_ru_money * 1).toFixed(2)
                        this.val5 = ""
                        this.val6 = ""
                        break;
                    case "thisweiIn":
                        this.dialogTitle = "己方未收货总金额（元）"
                        this.val1 = '采购单（元） ' + (this.list[0].cai_weiru_money * 1).toFixed(2)
                        this.val2 = '店外调入单（元） ' + (this.list[0].diao_weiru_money * 1).toFixed(2)
                        this.val3 = "跨平台调拨金额（元）" + (this.list[0].platform_weiru_money * 1).toFixed(2)
                        this.val4 = ""
                        this.val5 = ""
                        this.val6 = ""
                        break;
                    case "thisOut":
                        this.dialogTitle = "本期总出库金额（元）"
                        this.val1 = '礼品机出货金额（元） ' + (this.list[0].thisOutUnitsshipped * 1).toFixed(2)
                        this.val2 = '店外调出单金额（元）' + (this.list[0].diao_out_money * 1).toFixed(2)
                        this.val3 = '店内其他渠道出货金额（元） ' + (this.list[0].za_out_money * 1).toFixed(2)
                        this.val4 = '商品销售金额（元） ' + (this.list[0].sale_out_money * 1).toFixed(2)
                        this.val5 = '礼品兑换金额（元） ' + (this.list[0].gift_convertible_out_money * 1).toFixed(2)
                        this.val6 = "跨平台调拨金额（元）" + (this.list[0].platform_out_money * 1).toFixed(2)
                        break;
                    case "thisweiOut":
                        this.dialogTitle = "对方未到货金额（元）"
                        this.val1 = '店外调出单（元） ' + (this.list[0].diao_weiout_money * 1).toFixed(2)
                        this.val2 = "跨平台调拨金额（元）" + (this.list[0].platform_weiout_money * 1).toFixed(2)
                        this.val3 = ""
                        this.val4 = ""
                        this.val5 = ""
                        this.val6 = ""
                        break;
                    case "return_money":
                        this.dialogTitle = "本期退货总金额（元）"
                        this.val1 = "本期退货总金额（元） " + (this.list[0].return_money * 1).toFixed(2)
                        this.val2 = ""
                        this.val3 = ""
                        this.val4 = ""
                        this.val5 = ""
                        this.val6 = ""
                        break;
                }
                this.detailDialog = true;
            },
            // 导出
            exportClick() {
                getExport(this.formInline)
                this.exportLoading = true;
                this.$refs.cd.countDownF(30).then(() => {
                    this.exportLoading = false;
                });
            },
            // 获取门店
            getStore() {
                getStoreList({ look_del: this.formInline.look_del, category_id: 103 }).then(response => {
                    this.storeList = response;
                   let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else {
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id;
                        }
                    }
                    if (this.list == null) {
                        this.searchClick();
                    }
                });
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList(this.formInline).then(response => {
                    this.list = response
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    }
</script>